import { Divider, Row, Col } from 'antd';
import React, { PureComponent } from 'react';

import { FirstHeaderC, SecondHeaderC, TableC, PrimaryGhostC } from '@/src/components';
import { useExportExcel, useExportMoreTableInSheet } from '@/src/utils/exportExcelHooks';

class ExportTableBaseDate extends PureComponent {
  // eslint-disable-next-line react/state-in-constructor
  state = {
    dataSource: [
      {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
      },
      {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号',
      },
    ],
    columns: [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
      },
    ],
    dataSource1: [
      {
        key: '1',
        name: '张开龙',
        hobby: '乒乓',
        company: '阿里',
      },
      {
        key: '2',
        name: '李四',
        hobby: '羽毛球',
        company: '腾讯',
      },
    ],
    columns1: [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '公司',
        dataIndex: 'company',
        key: 'company',
      },
      {
        title: '爱好',
        dataIndex: 'hobby',
        key: 'hobby',
      },
    ],
  };

  // 普通表头的单元格的导出
  ordinaryExport = () => {
    const { columns, dataSource, columns1, dataSource1 } = this.state;
    useExportExcel(
      {
        sheetOne: {
          data: dataSource,
          columns,
          action: 'operate',
          callback: (ws) => {
            ws.A1 = {
              v: '123', // 值
              t: 's', // 值类型
              s: {
                // 格式
                font: {
                  // 字体
                  name: '宋体',
                  sz: 11,
                  bold: true,
                  color: { rgb: 'ffffff' },
                },
                alignment: { horizontal: 'center', vertical: 'center', wrap_text: true }, // 位置
                fill: { fgColor: { rgb: 'ff0000' } }, // 背景
              },
            };
            return ws;
          },
        },
        sheetTwo: {
          data: dataSource1,
          columns: columns1,
          action: '',
        },
      },
      '普通表头的单元格',
    );
  };

  getColumn1 = () => [
    {
      title: '',
      key: 'header',
    },
    {
      title: '产品',
      key: 'product',
    },
    {
      title: '基准',
      key: 'reference',
    },
    {
      title: '超额',
      key: 'excess',
    },
  ];

  getData1 = () => [
    {
      header: '日收益率',
      product: '1',
      reference: '2',
      excess: '3',
    },
    {
      header: '近三月收益率',
      product: '1',
      reference: '2',
      excess: '3',
    },
    {
      header: '近六月收益率',
      product: '1',
      reference: '2',
      excess: '3',
    },
    {
      header: '近一年收益率',
      product: '1',
      reference: '2',
      excess: '3',
    },
  ];

  getDataSourceTime = () => {
    const dataSourceTime = [];
    for (let i = 0; i < 4; i++) {
      dataSourceTime.push({
        header: 'YYYY-MM-DD',
        product: i,
        reference: i + 1,
        excess: i + 2,
      });
    }
    return dataSourceTime;
  };

  getDataSourceGroupHeader = () => {
    const dataSourceGroupHeader = [];
    for (let i = 0; i < 5; i++) {
      dataSourceGroupHeader.push({
        a: i,
        b: i + 1,
        c: i + 2,
        d: i + 3,
        e: i + 4,
        f: i + 5,
      });
    }
    return dataSourceGroupHeader;
  };

  // 一个工作表导出内多个table
  moreTableInSheetExport = () => {
    const columns = this.getColumn1(); // 表1，2columns
    const dataSource = this.getData1(); // 表1 dataSource
    const dataSourceTime = this.getDataSourceTime(); // 表2 dataSource
    const dataSourceGroupHeader = this.getDataSourceGroupHeader(); // 表3 dataSource
    const groupedHeader = [
      // type是2时的xlsxData表头
      ['资产类别', '代码', '简称', '产品', '', ''],
      ['', '', '', '平均权重', '收益率', '收益率贡献'],
    ];
    const sheetConfig = {
      表名: {
        sheetBody: [
          {
            type: 3,
            anyXlsxData: [[`产品代码：${1212}`, `产品名称：${'A股'}`, `起始日期:${'2023-01,2023-03'}`, '']],
          },
          {
            type: 3,
            anyXlsxData: [[''], ['区间收益率', '', '', '']],
          },
          {
            type: 1, // 类型1时普通表头传普通columns
            columns,
            dataSource,
          },
          {
            type: 3,
            anyXlsxData: [[''], ['区间趋势', '', '', '']],
          },
          {
            type: 1,
            columns,
            dataSource: dataSourceTime,
          },
          {
            type: 3,
            anyXlsxData: [[''], ['收益率明细', '', '', '']],
          },
          {
            type: 2, // 为2是为分组表头， 不传column传groupedHeader
            groupedHeader,
            dataSource: dataSourceGroupHeader,
          },
        ],
        columnWidth: [{ wpx: 100 }, { wpx: 120 }, { wpx: 100 }], // 列1： 100，列2： 120， 列3： 100
        mergeRules: [
          { s: { r: 0, c: 2 }, e: { r: 0, c: 3 } }, // 合并第1行 1到2列
          { s: { r: 2, c: 0 }, e: { r: 2, c: 3 } }, // 合并第3行 1到4列
          { s: { r: 9, c: 0 }, e: { r: 9, c: 3 } }, // 合并第10行 1到4列
          { s: { r: 16, c: 0 }, e: { r: 16, c: 3 } }, // 合并第17行 1到4列
          { s: { r: 17, c: 3 }, e: { r: 17, c: 5 } }, // 合并第18行 3到5列
          { s: { r: 17, c: 0 }, e: { r: 18, c: 0 } }, // 合并第18行到19行 第1列
          { s: { r: 17, c: 1 }, e: { r: 18, c: 1 } }, // 合并第18行到19行 第2列
          { s: { r: 17, c: 2 }, e: { r: 18, c: 2 } }, // 合并第18行到19行 第3列
        ],
        callback: (ws) => {
          // A1,B1,C1 对应xlsx文件打开时的A1,B1,C1
          const oneTitle = ['A1', 'B1', 'C1'];
          // 一级标题设置背景
          oneTitle.map((v) => {
            ws[v].s = {
              fill: { fgColor: { rgb: 'e8efff' } }, // A3背景
            };
          });
          ws.A3.s = {
            fill: { fgColor: { rgb: 'e8efff' } }, // A3背景
          };
          ws.A10.s = {
            fill: { fgColor: { rgb: 'e8efff' } }, // A10背景
          };
          ws.A17.s = {
            fill: { fgColor: { rgb: 'e8efff' } }, // A17背景
          };
          ws.D4.s = {
            // 格式
            wpx: 100,
            font: {
              // 字体
              name: '宋体',
              sz: 11, // 大小
              bold: true, // 加粗
              color: { rgb: 'f5d257' }, // 颜色
            },
            alignment: { horizontal: 'center', vertical: 'center', wrap_text: true }, // 位置
            // fill: { fgColor: { rgb: 'ff0000' } }, // 背景
            border: {
              // 边框
              bottom: {
                style: 'medium', // thin medium thick dotted hair dashed mediumDashed dashDot mediumDashDot dashDotDot mediumDashDotDot slantDashDot
                color: {
                  rgb: '36f9f6',
                },
              },
              left: {
                style: 'medium',
                color: { rgb: 'ff0000' },
              },
              top: {
                style: 'medium',
                color: { rgb: 'ff0000' },
              },
              right: {
                style: 'medium',
                color: { rgb: 'ff0000' },
              },
            },
          };
          return ws;
        },
      },
    };
    useExportMoreTableInSheet(sheetConfig, '一个工作表导出内多个table');
  };

  render() {
    const { columns, dataSource, columns1, dataSource1 } = this.state;
    const grouperHerder = [
      {
        title: '资产类别',
        key: 'a',
      },
      {
        title: '代码',
        key: 'b',
      },
      {
        title: '简称',
        key: 'c',
      },
      {
        title: '产品',
        children: [
          {
            title: '平均权重',
            key: 'd',
          },
          {
            title: '收益率',
            key: 'e',
          },
          {
            title: '收益率贡献',
            key: 'f',
          },
        ],
      },
    ];
    return (
      <div>
        <FirstHeaderC title='基于数据导出' />
        <div style={{ margin: '20px 0' }}>
          <SecondHeaderC title='普通表头的单元格的导出' />
          <PrimaryGhostC title='导出' onClick={this.ordinaryExport} />
          <div>
            <Row gutter={16}>
              <Col span={12}>
                <TableC columns={columns} dataSource={dataSource} hidePage scroll={{ x: 'max-content' }} />
              </Col>
              <Col span={12}>
                <TableC columns={columns1} dataSource={dataSource1} hidePage scroll={{ x: 'max-content' }} />
              </Col>
            </Row>
          </div>
          <Divider dashed />
          <SecondHeaderC title='一个工作表导出内多个table' />
          <PrimaryGhostC title='导出' onClick={this.moreTableInSheetExport} />
          <Row gutter={16}>
            <Col span={12}>
              <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
                <span>产品代码：1212</span>
                <span>产品名称：A股</span>
                <span>起始日期: 2023-01,2023-03</span>
              </div>
              <br />
              区间收益率
              <TableC columns={this.getColumn1() || []} dataSource={this.getData1() || []} hidePage scroll={{ x: 'max-content' }} />
              区间趋势
              <TableC columns={this.getColumn1() || []} dataSource={this.getDataSourceTime() || []} hidePage scroll={{ x: 'max-content' }} />
              收益率明细
              <TableC columns={grouperHerder || []} dataSource={this.getDataSourceGroupHeader() || []} hidePage scroll={{ x: 'max-content' }} />
            </Col>
          </Row>
          <div />
        </div>
      </div>
    );
  }
}
export default ExportTableBaseDate;
